import './ComputeCourse.less'
import React, { useState, useCallback, useEffect } from 'react'
import { Row } from 'antd'
import { Transition } from 'react-transition-group'

import Progress from './module/Progress'
import Sample from './module/Sample'

export default function ComputeCourse() {
  // 当前步骤
  const [current, setCurrent] = useState(-1);
  // 当前移动方向
  const [up, setUp] = useState(false);
  // 是否变成title
  const [isTitle, setIsTitle] = useState(up);
  // 是否显示主内容
  const [show, setShow] = useState(up);
  // 切换视图
  useEffect(() => {
    let timer = null;
    // 向上移动时，先移动title
    if(up) {
      setIsTitle(true);
      timer = setTimeout(() => {
        setShow(true);
      }, 500);
    }
    // 向下移动时，先隐藏content
    else {
      setShow(false);
      timer = setTimeout(() => {
        setIsTitle(false);
      }, 500);
    }
    return () => {
      clearTimeout(timer);
    };
  }, [up]);
  // 步骤更新
  const onChange = useCallback(current => {
    setCurrent(current);
    if(current > -1 && current < 5) {
      setUp(true);
    }
    else {
      setUp(false);
    }
  }, []);
  return (
    <Row className={`compute-box`}>
      <Progress current={current} isTitle={isTitle} onChange={onChange}/>
      <Transition in={show} timeout={500}>
        {state => {
          return (
            <Sample state={state} current={current}/>
          );
        }}
      </Transition>
    </Row>
  )
}
